iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1

前兩天講了模板語法中的插值,今天來講指令的部分吧۹(ÒہÓ)۶

Directives 指令

Vue的特殊DOM屬性都會以v-開頭,如v-if,這些特殊屬性的內容必須是單行的Javascript敘述(除了v-for之外),相較於 Mustache 標籤只是單純的取代頁面上的區塊,Directive會直接影響DOM本身,將某個運算式執⾏後的結果回饋到對應的 DOM 上。

小範例:

    <div id="app">
        <p v-if="seen">現在你看到我了</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                seen:true
            }
        });
    </script>

https://ithelp.ithome.com.tw/upload/images/20210924/20131400Tbp6MJlULU.png

v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素,所以當我們把seen改為false,這一串字就會不見。

   <div id="app">
        <p v-if="seen">現在你看到我了</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                seen:false
            }
        });
    </script>

https://ithelp.ithome.com.tw/upload/images/20210924/20131400iv5jy6jd8B.png

Arguments 參數

一些指令語法能接受一個參數,在指令名稱後面接冒號:表示。

例如,v-bind 指令可以用於響應式的更新 HTML attribute:

<div id="app">
        <a v-bind:href="url">vue官網</a>
</div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                url:"https://cn.vuejs.org/"
            }
        });
</script>

這邊hrefv-bind的參數,告訴v-bind要綁定的對象。
我們將url的網址設為vue的官網,執行後會發現我們可以點擊”vue官網”連接到vue的官網。
https://ithelp.ithome.com.tw/upload/images/20210924/20131400DWb6q4uBnk.png
https://ithelp.ithome.com.tw/upload/images/20210924/20131400EMSpxXGE3K.png

另一個例子是 v-on 指令,它用於監聽 DOM 事件:

<a v-on:click="doSomething"></a>

clickv-on的參數,表示v-on的綁定對象

Modifiers 修飾符

修飾符是以.指定特殊的後綴。
例如,.prevent修飾符為告訴v-on指令對於觸發的事件調用event.preventDefault()

<form v-on:submit.prevent="onSubmit"> ... </form>

另一個小例子:

我們先創兩個div並為他們個別綁定一個點擊事件(click),而在底下vm裡面我們用methods來聲明方法,執行之後,當我們點擊”click me!!”打開console看會發現執行了兩個函數,先是click2,然後執行click1,這是因為當我們點擊click2的時候,click1(父級)也會被觸發點擊事件。

<div id="app">
        <div @click="click1">
            <div @click="click2">
                click me!!
            </div>
        </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            click1:function(){
                console.log('click1')
            },
            click2:function(){
                console.log('click2')
            }
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20210924/20131400ixNepzaWh2.png

那如果我們希望觸發click2之後暫停,不要接著觸發click1要怎麼做呢ヾ(´・ ・`。)ノ”
沒有錯的喇!這邊我們就要加上修飾符(๑✧∀✧๑)
在click2前的@click後面加上.stop,這樣子click2執行完後就會停下來了!

<div id="app">
        <div @click="click1">
            <div @click.stop="click2">
                click me!!
            </div>
        </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            click1:function(){
                console.log('click1')
            },
            click2:function(){
                console.log('click2')
            }
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20210924/20131400lyiuCdsr1Y.png

Shorthands 縮寫

v- 前綴作為一種視覺提示,用來識別模板中Vue特定的attribute。
但對於一些我們常用的指令來說,每次都要打v- 前綴實在太繁瑣了[○・`Д´・○],所以針對大家常會大量使用到的v-bind 及 v-on,Vue 給了這兩個 Directives 縮寫,以減少開發上要寫的代碼數量(´▽`)

v-bind

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-bind 使用 : 當作簡寫。

v-on

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

v-on使用 @ 當作簡寫。

歐歐歐,今天第15天了,竟然已經過一半了,還有15天,加油 ლ(∘◕‵ƹ′◕ლ)


上一篇
Day 14. 模板語法Template Syntax – 插值 Attribute、JavaScript 表達式
下一篇
Day 16. 計算屬性Computed Properties
系列文
菜鳥學前端,一起vue起來 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言